<route>
    {
        meta: {
            layout: 'index',
            title:'岗位分类'
        }
    }  
</route>
<template>
    <view>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain :icon="Plus" @click="doCreate" v-isAdmin>新增</el-button>
            </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="tableData">
            <el-table-column label="岗位分类名称" prop="jobTypeName" :show-overflow-tooltip="true" width="200" />
            <el-table-column label="岗位分类编码" prop="jobTypeCode" :show-overflow-tooltip="true" width="200" />
            <el-table-column label="职级排序" prop="orderNum" :show-overflow-tooltip="true" />
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
            <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
                        <el-button type="text" :icon="Edit" @click="doUpdate(scope.row)"
                            v-hasPermi="['system:role:update']"></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                        <el-button type="text" :icon="Delete" @click="doDelete(scope.row)"
                            v-hasPermi="['system:role:delete']"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        
        <AntdConfirmModal :title="isCreate ? '新建岗位分类' : '更新岗位分类'" ref="antdModalRef" :keepSlot="false"
            @confirm="submitTypeForm">
            <a-form :model="form" name="basic" :label-col="{ span: 6 }">
                <a-form-item label="岗位分类名称" name="jobTypeName" :rules="[{ required: true, message: '请输入岗位分类名称' }]">
                    <a-input v-model:value="form.jobTypeName" />
                </a-form-item>
                <a-form-item label="岗位分类编码" name="jobTypeCode" :rules="[{ required: true, message: '请输入岗位分类编码' }]">
                    <a-input v-model:value="form.jobTypeCode" />
                </a-form-item>
                <a-form-item label="职级分类排序" name="orderNum">
                    <a-input-number v-model:value="form.orderNum" />
                </a-form-item>
                <a-form-item :name="remark" label="备注">
                    <a-textarea v-model:value="form.remark" />
                </a-form-item>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import useJobStore from '../../store/job'
const jobStore = useJobStore()
import useApp from '@/hooks'
const { $, proxy } = useApp()
const isCreate = ref(true)
const antdModalRef = ref(null)
const tableData = computed(() => {
    return $.freeStore(jobStore.types)
})
const form = ref({
    jobTypeName: undefined,
    jobTypeCode: undefined,
    orderNum: 1,
    status: 1,
    remark: undefined,

})
// 表单重置
function resetForm() {
    form.value = {
        jobTypeName: undefined,
        jobTypeCode: undefined,
        orderNum: 1,
        status: 1,
        remark: undefined
    }
}
function openModal() {
    antdModalRef.value.openModal()
}

// 点击新建
function doCreate() {
    resetForm()
    isCreate.value = true
    openModal()

}
// 删除
function doDelete(row) {
    $.showModal({
        title: '提醒',
        type: 'warning',
        content: '是否删除该分类',
        cancelText: '取消'
    }).then(r => {
        if (r.confirm) {
            jobStore.deleteType(row.id).then(res => {
                $.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
            })
        } else {

        }
    })
}
// 删除
function doUpdate(row) {
    isCreate.value = false
    jobStore.getType(row.id).then(r => {
        form.value = $.freeStore(r)
        openModal()
    })
}
// 新建
function submitTypeForm() {
    if (isCreate.value) {
        jobStore.addType(form.value).then(res => {
            $.showToast({
                title: '创建成功',
                icon: 'success'
            })
            resetForm()
            antdModalRef.value.closeModal()
        })
    } else {
        jobStore.updateType(form.value).then(res => {
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
            resetForm()
            antdModalRef.value.closeModal()
        })
    }

}
jobStore.getTypes()
</script>